<template>
  <div class="chart-box" ref="pieCharts_2"></div>
</template>

<script>
import resize from '../mixins/resize'

export default {
  name: "EchartBar",
  mixins: [resize],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    datas: {
      deep: true,
      handler: function (val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.pieCharts_2)
      this.setOptions(this.datas)
    },
    setOptions(datas) {
      if (!this.chart) {
        return false
      }
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          backgroundColor: "rgba(0,0,0,0.8)", //设置背景图片 rgba格式
          color: "#537099",
          borderWidth: "1", //边框宽度设置1
          borderColor: "gray", //设置边框颜色
          textStyle: {
            color: "#537099", //设置文字颜色
          },
        },
        grid: {
          show: true,
          top: '8%',
          left: "4%",
          right: "8%",
          bottom: "4%",
          containLabel: true,
          borderColor: '#0694ce',
          zlevel: 2,
        },
        xAxis: [
          {
            type: 'category',
            zlevel: 1,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            boundaryGap: false,
            minorTick: {
              show: true
            },
            axisTick: {show: false},
            axisLabel: {color: '#0694ce', fontSize: 15, showMaxLabel: true},
            axisLine: {show: true, lineStyle: {color: '#0694ce'}},
            splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}}
          },
        ],
        yAxis: {
          type: 'value',
          name: '',
          zlevel: 1,
          nameTextStyle: {color: '#fff', fontSize: 15},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLabel: {color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}},
          min: 0
        },
        series: [
          {
            data: datas,
            type: 'line',
            itemStyle: {normal: {color: '#0694ce', lineStyle: {color: '#0694ce', width: 2}}},
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="less">
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>